<template>
    <div class="exp-box">
        <el-timeline class="timeline">
            <el-timeline-item
                              placement="top"
                              :key="index"
                              :icon="activity.icon"
                              :type="activity.type"
                              :color="activity.color"
                              :size="activity.size"
                              :timestamp="i.lCreateTime"
            v-for="(i,index) in obj.logList.list">
                <el-card class="log-card">
                    <h4>{{i.lTitle}}</h4>
                    <p>{{i.lContent}}</p>
                </el-card>
            </el-timeline-item>
        </el-timeline>

    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import axios from 'axios'
    import {goTop} from "@/assets/js/utils";

    export default {
        name: "Experience",
        setup(){
          let  activity=reactive( {
                icon: 'el-icon-more',
              // 圆点颜色
                color: '#42b983'
            })

           let obj=reactive({
               logList:[]
           })


            function getLogList(){
              return axios.get("/api/log").then(resp=>resp.data)
            }

            onMounted(async() =>{
                const date=await getLogList()
                if(date.code===200){
                    obj.logList=date.data
                }
                goTop()
            })

            return{
                activity,
                obj
            }
        }
    }
</script>

<style scoped lang="less">
    .exp-box{
        width: 100%;
        background-color: var(--theme-color);
        min-height: 2300px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .timeline{
            width: 800px;
            margin-top: 70px;
            margin-bottom: 300px;
            .log-card:hover{
                /*font-size: 15px;*/
                /*box-shadow: 0 0 50px 5px #42b983;*/
                animation: breath-shadow 3.5s infinite alternate;
            }

        }
    }

    @keyframes breath-shadow {
        50%{
            box-shadow: 0 0 50px 5px #42b983;
        }
        100%{
            box-shadow: 0 0 50px 0 #42b983;
        }
    }
</style>